<template>
	<div class="w-full bet-amount" :class="isRuning || isDisabled ? 'opacity-50' : ''">
		<div class="text-[#96A5AA] text-base h-[18px] leading-[18px] moneybox f-style">
			<span class="text-[14px]">{{ title }}</span>
		</div>
		<n-popover trigger="manual" placement="bottom" :show="isDisabled">
			<template #trigger>
				<n-input-group
					class="mt-[4px] flex h-[40px] rounded-[4px] b-shadow"
					size="large"
					:style="{ pointerEvents: isRuning || isDisabled ? 'none' : '' }">
					<n-input-group-label
						class="px-0 h-[40px] rounded-[4px]"
						size="large"
						style="background-color: #3e4c68">
						<div class="h-full flex justify-center items-center rounded-[4px]">
							<div
								class="w-full h-[40px] px-4 flex justify-center items-center app-font-bold text-base cursor-pointer text-[14px] rounded-[4px] btn-style"
								:class="{ active: isActive === 'rest' }"
								@click="handleErfenzhiyi">
								{{ $t('miniGames.reset') }}
							</div>
							<div
								class="w-full h-[40px] px-4 flex justify-center items-center app-font-bold text-base cursor-pointer text-[14px] rounded-[4px] btn-style"
								:class="{ active: isActive === 'add' }"
								@click="handleDoubble">
								{{ $t('miniGames.increaseBy') }}
							</div>
						</div>
					</n-input-group-label>
					<n-input
						class="flex-1 rounded-[4px] input-style"
						:disabled="isDisabled || isActive === 'rest'"
						v-model:value="value"
						:allow-input="onlyAllowNumber"
						:on-input="change"
						:on-focus="handleSelect"
						ref="inputInstRef">
						<template #suffix>
							<div
								class="flex items-center flex-col mr-6 text-[10px] w-[14px] rounded-[2px]"
								style="background-color: #3e4c68">
								<base-icon class="point" name="superior" @click="add" />
								<base-icon class="point" name="down" @click="down" />
							</div>
							<span>%</span>
						</template>
					</n-input>
				</n-input-group>
			</template>
			<!-- <span class="text-pink-500 p-5 px-4">输入提款金额超出范围</span> -->
		</n-popover>
	</div>
</template>
<script lang="ts" setup>
import { NInput, NInputGroup, NInputGroupLabel, NPopover } from 'naive-ui'
import { defineProps, ref, watch, onMounted } from 'vue'
// import { useWalletStore } from '@/store'
import type { InputInst } from 'naive-ui'
import { BaseIcon } from '@/components/base'
import { setGameCacheData, getGameCacheData } from '../../util'

const props = defineProps({
	isRuning: {
		type: Boolean,
		default: false
	},
	isDisabled: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: ''
	},
	type: {
		type: String,
		default: ''
	}
})
// const walletStore = useWalletStore()
const inputInstRef = ref<InputInst | null>(null)
const value = ref<any>('0')
const isActive = ref<'rest' | 'add'>('rest')
const onlyAllowNumber = (value: string) => !value || /^\d+(\.\d*)?$/.test(value)
const emit = defineEmits(['change'])

watch([value, isActive], ([val, active]) => {
	emit('change', { value: val, active })
	setGameCacheData({
		[props.type]: val,
		[`${props.type}Active`]: active
	})
})
onMounted(() => {
	const gameCacheData = getGameCacheData()
	value.value = gameCacheData?.[props.type] || 0
	isActive.value = gameCacheData?.[`${props.type}Active`] || 'rest'
	emit('change', { value: value.value, active: isActive.value })
})
const change = (val: string) => {
	emit('change', { value: val, active: isActive.value })
}
const handleSelect = () => {
	inputInstRef.value?.select()
}
const add = () => {
	if (isActive.value === 'rest') return
	value.value = String(+value.value + 1)
}
const down = () => {
	if (isActive.value === 'rest') return
	value.value = String(+value.value - 1)
}
const handleErfenzhiyi = () => {
	isActive.value = 'rest'
	value.value = 0
}
const handleDoubble = () => {
	isActive.value = 'add'
}
</script>
<style lang="scss" scoped>
.bet-amount {
	:deep(.n-input-group-label__border) {
		display: none;
	}
	.point {
		cursor: pointer;
		width: 10px;
		height: 10px;
	}
	.mr-6 {
		margin-right: 6px;
	}
	.moneybox {
		display: flex;

		justify-content: space-between;
		span {
			color: var(--text-396-a-5-aa, #96a5aa);
			font-size: 14px;
			font-style: normal;
			font-weight: 700;
			line-height: 18px; /* 128.571% */
		}
		span:nth-child(2) {
			font-size: 12px;
		}
	}
}
.f-style {
	font-weight: 600;
}
.input-style {
	border: 2px solid #3e4c68;
	:deep(.n-input__input > .n-input__input-el) {
		height: 100% !important;
	}
}
.btn-style {
	&:hover,
	&.active {
		background-color: #557086;
	}
}
.b-shadow {
	box-shadow:
		0 1px 3px 0 rgba(0, 0, 0, 0.2),
		0 1px 2px 0 rgba(0, 0, 0, 0.12);
}
</style>
